<template>
  <header class="my-header van-hairline--bottom">
    <i v-if="!isback" class="custfont back-img" @click="goBack"></i>
    <i v-else>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</i>
    <div class="page-title-name">{{ name }}</div>
    <i class="custfont page-more"></i>
  </header>
  <div class="head-filler" />
</template>

<script>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
export default {
  props: {
    name: {
      type: String,
      default: ''
    },
    back: {
      type: String,
      default: ''
    },
    noback: {
      type: Boolean,
      default: false
    }
  },
  emits: ['callback'],
  setup(props, ctx) {
    const isback = ref(props.noback)
    const router = useRouter()
    const goBack = () => {
      if (!props.back) {
        router.go(-1)
      } else {
        router.push({ path: props.back })
      }
      ctx.emit('callback')
    }
    return {
      goBack,
      isback
    }
  }
}
</script>

<style>
.my-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 44px;
  line-height: 44px;
  padding: 0 10px;
  color: #252525;
  background: #fff;
}
.page-title-name {
  font-size: 15px;
}
.head-filler {
  height: 44px;
}

@font-face {font-family: "custfont";
  src: url('//at.alicdn.com/t/font_1623819_3g3arzgtlmk.eot?t=1580649677676'); /* IE9 */
  src: url('//at.alicdn.com/t/font_1623819_3g3arzgtlmk.eot?t=1580649677676#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
  url('//at.alicdn.com/t/font_1623819_3g3arzgtlmk.woff?t=1580649677676') format('woff'),
  url('//at.alicdn.com/t/font_1623819_3g3arzgtlmk.ttf?t=1580649677676') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('//at.alicdn.com/t/font_1623819_3g3arzgtlmk.svg?t=1580649677676#nbicon') format('svg'); /* iOS 4.1- */
}

.custfont {
  font-family: "custfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.back-img:before {
  content: "\e675";
}

.page-more:before {
  content: "\e64b";
}

</style>
